<template>
  <template
    v-if="props.dataType === 'lineBreak'"
  >
    <div class="lineBreak" :class="{ checking: props.enableCheck }">
      <div
        class="blank"
        @click.stop.prevent="onWordClick($event, true)">
      </div>
    </div>
    <br />
  </template>
  <div
    v-else
    class="word-wrapper"
    :class="{ marked: props.marked }"
    @click.stop.prevent="onWordClick($event)"
  >
    <template v-if="props.dataType === 'chinese'">
      <div
        v-if="props.enableCheck"
        v-show="props.checked"
        class="word-mark"
        @click.stop="onMarksShow($event)"
      >
        <span
          v-if="props.attribs.ph"
          class="say"
          :class="{ marked: props.marked }"
          v-text="props.mark"
        ></span>
        <span
          v-if="
            !props.attribs.ph &&
              props.data &&
              ssmlRenderer.multiPYDict[props.data].length > 1
          "
          class="dot"
        ></span>
      </div>
    </template>

    <template v-else-if="props.dataType === 'word'">
      <div
        v-if="props.enableCheck"
        v-show="props.checked"
        class="word-mark"
        @click.stop="onMarksShow($event)"
      >
        <span
          v-if="props.attribs['interpret-as']"
          class="say"
          :class="{ marked: props.marked }"
          v-text="props.mark"
        ></span>
        <span v-else class="dot"></span>
      </div>
    </template>

    <template v-else-if="props.dataType === 'number'">
      <div
        v-if="props.enableCheck"
        v-show="props.checked && props.data.length > 1"
        class="word-mark"
        @click.stop="onMarksShow($event)"
      >
        <span
          v-if="props.attribs['interpret-as']"
          class="say"
          :class="{ marked: props.marked }"
          v-text="props.mark"
        ></span>
        <span v-else class="dot"></span>
      </div>
    </template>

    <template v-else-if="props.dataType === 'break'">
      <div
        v-if="props.enableCheck"
        class="word-mark"
        @click.stop="onMarksShow($event)"
      >
        <span
          v-if="props.attribs['time']"
          class="break"
          v-text="props.mark"
        ></span>
      </div>
    </template>

    <template v-else-if="props.dataType === 'text'">
      <div
        v-if="props.enableCheck"
        v-show="props.checked"
        class="word-mark"
      ></div>
    </template>

    <template v-if="props.dataType === 'break'">
      <div class="word break">
        <!-- <speak-break /> -->
        <i class="iconfont icon-speak-break icon"></i>
      </div>
    </template>
    <template v-else>
      <div
        v-if="props.data === ' '"
        class="word"
        :class="{ marked: props.marked, marking: props.marking }"
      >&nbsp;</div>
      <div
        v-else
        class="word"
        :class="{ marked: props.marked, marking: props.marking }"
        v-text="props.data"
      ></div>
    </template>
  </div>
</template>

<script lang="ts" setup name="RenderNode">
import { SSMLRenderer } from '../utils/ssml'
// import { useProjectEditStoreHook } from '@/store/project';
// import SpeakBreak from '~icons/icon/speak-break';

// eslint-disable-next-line no-undef
const props = defineProps({
  ssmlRenderer: {
    type: SSMLRenderer,
    default: null,
  },
  index: {
    type: Number,
    default: -1,
  },
  checked: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: '',
  },
  dataType: {
    type: String,
    default: '',
  },
  data: {
    type: String,
    default: '',
  },
  attribs: {
    type: Object,
    default() {
      return {};
    },
  },
  mark: {
    type: String,
    default: '',
  },
  marking: {
    type: Boolean,
    default: false,
  },
  marked: {
    type: Boolean,
    default: false,
  },
  defaultMark: {
    type: String,
    default: '',
  },
  enableCheck: {
    type: Boolean,
    default: false,
  },
});

// eslint-disable-next-line no-undef
const emits = defineEmits(['mark-click', 'word-click']);

// const store = useProjectEditStoreHook();

// const { ssmlRenderer } = store;

const onMarksShow = (event: MouseEvent) => {
  emits('mark-click', event);
};

const onWordClick = (event: MouseEvent, previous?: true) => {
  if (previous) {
    const target = (event.target as HTMLElement).parentNode?.previousSibling
    emits('word-click', { target, index: props.index });
  } else {
    emits('word-click', { event, index: props.index });
  }
};
</script>

<style lang="scss" scoped>
.word-wrapper {
  display: inline-block;
  max-height: 3rem;
  line-height: 2rem;
  margin: 0;
  position: relative;
  width: fit-content;
  &.marked {
    margin: 0 4px;
  }
  .word-mark {
    margin: 0 auto;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    user-select: none;
    cursor: pointer;
    user-select: none;
    .say {
      font-size: 12px;
      border-radius: 30px;
      padding: 2px 8px;
      color: #ffffff;
      background: #fcb507;
      &.marked {
        background: #60ccdc;
      }
    }
    .break {
      font-size: 12px;
      border-radius: 30px;
      padding: 2px 8px;
      color: #ffffff;
      background: #7392ff;
    }
    .dot {
      position: relative;
      top: 40%;
      margin: 0 auto;
      width: 1rem;
      height: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &::after {
        content: '';
        border-radius: 50%;
        width: 6px;
        height: 6px;
        background: #fcb507;
      }
    }
  }
  .word {
    font-size: 16px;
    margin: 0 auto;
    color: #333333;
    text-align: center;
    word-break: break-all;
    cursor: text;
    &::selection {
      background: #B4D5FE;
    }
    &.marked {
      color: #60ccdc;
    }
    &.marking {
      color: #000000;
    }
    &.break {
      color: #7392ff;
      vertical-align: bottom;
      line-height: 1rem;
      position: relative;
      top: 4px;
      & > i {
        font-size: 24px;
      }
    }
  }
}
.lineBreak {
  display: inline-block;
  width: 0;
  height: 2rem;
  position: relative;
  vertical-align: bottom;
  &.checking {
    height: 3rem;
  }
  &::selection {
    background: transparent;
  }
  .blank {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
  }
}
br {
  &::selection {
    background: transparent;
  }
}
</style>
